<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div id="zong"  onmouseover="yiru();" onmouseout="yichu();">
			<img src="img/img3.jpg" id="qiehuan"/>
			<button id="zuo" onclick="showshang();"></button>
			<button id="you" onclick="show();"></button>
		</div>
	</body>
	<script type="text/javascript">
			var zong=document.getElementById("zong");
			var shuzu='img/img1.jpg,img/img2.jpg,img/img3.jpg,img/img4.jpg,img/img5.jpg'.split(',');
			var img=document.getElementById("qiehuan");
			var  index=0;
			var time=setInterval(show,3000);
			//下一张切换
			function show(){
				if (index==shuzu.length-1) {
					index=-1;
				}
				img.src=shuzu[++index];
			}
			//上一张切换
			function showshang(){
				if (index==0) {
					index=shuzu.length;
				}
				img.src=shuzu[--index];
			}
			//自动切换函数 
			function yiru(){
				clearInterval(time);
			}
			function yichu(){
				setInterval(show,3000);
			}
	</script>
</html>
 